<template>
    <div class="page page-association-news-list page-full has-headbar">
        <head-bar :title="this.$route.meta.title" :prevRoute="{name: 'association-detail', params: {id: this.$route.params.id}}" />
        <van-pull-refresh class="pullrefresh-box" v-model="refreshLoading" @refresh="onRefresh">
          <van-list class="list-container"
            v-model="moreLoading"
            :finished="moreFinished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onLoad">
            <news-item v-for="item in list" :key="item.id" :item="item"></news-item>
            <!-- <empty-data :empty="list.length === 0 && !moreLoading"></empty-data> -->
          </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { API_ASSOCIATION_NEWS } from '@/service/association'
import NewsItem from './components/newsItem'
import { wxjsdkMixin } from '@/components/mixins'
export default {
  mixins: [wxjsdkMixin],
  name: 'association-news-list',
  components: { NewsItem },
  data () {
    return {
      list: [],
      refreshLoading: false, // 下拉刷新loading状态
      moreLoading: false,
      moreFinished: false,
      pageNumber: 0,
      pageSize: 8
    }
  },
  mounted () {
    this.wechatHideMenu()
    this.moreLoading = true
    this.requestData(resData => {
      let { resultList } = resData.list
      this.list = [...this.list, ...resultList]
    }).finally(() => {
      this.moreLoading = false
    })
  },
  methods: {
    requestData (callback) {
      let reqData = {
        associationId: parseInt(this.$route.params.id),
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize
      }
      return API_ASSOCIATION_NEWS(reqData).then((resData) => {
        let { resultList, totalSize } = resData.list
        if (resultList.length <= 0) {
          this.moreFinished = true
        } else {
          this.pageNumber = this.pageNumber + 1
          callback && callback(resData)
          if (totalSize === this.list.length) {
            this.moreFinished = true
          }
        }
      }).catch(() => {
        this.moreFinished = true
      })
    },
    onLoad () {
      if (this.refreshLoading) return
      this.requestData((resData) => {
        let { resultList } = resData.list
        this.list = [...this.list, ...resultList]
      }).then(() => {
        this.moreLoading = false
      }).catch(() => {
        this.moreLoading = false
      })
    },
    onRefresh () {
      this.pageNumber = 0
      let reqData = {
        associationId: parseInt(this.$route.params.id),
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize
      }
      API_ASSOCIATION_NEWS(reqData).then(resData => {
        let { resultList, totalSize } = resData.list
        if (resultList.length === 0) {
          this.moreFinished = true
          this.list = []
        } else {
          this.pageNumber = this.pageNumber + 1
          this.list = resultList
          if (totalSize === this.list.length) {
            this.moreFinished = true
          } else {
            this.moreFinished = false
          }
        }
      }).catch(() => {
        this.moreFinished = true
        this.list = []
      }).finally(() => {
        this.refreshLoading = false
      })
    }
  }
}
</script>

<style lang='less' scoped>
.list-container {
  padding: 0 12px;
  overflow: hidden;
  min-height: calc(100vh - @headBarHeight - 120px);
}
</style>
